<template>
    <el-container style="height: 100%; border: 0px solid #eee;padding: 0px">
        <el-aside width="200px">
            <el-menu :collapse="isCollapse">
                <el-submenu>
                    <template slot="title">
                        <router-link to="index"><i class="el-icon-s-home"></i>智慧社区管理</router-link>
                    </template>
                    <el-submenu v-for="(menu1,index) in menus" :key="index" :index="menu1.menuId+''">
                        <template slot="title">
                            <i :class="menu1.icon"></i>
                            {{menu1.menuName}}
                        </template>

                        <el-submenu v-for="(menu2,index) in menu1.menus" :key="index" :index="menu2.menuId+''">

                            <router-link :to="menu2.path" slot="title">
                                <i :class="menu2.icon"></i>
                                {{menu2.menuName}}
                            </router-link>

                            <el-menu-item v-for="(menu3,index) in menu2.menus" :key="index" :index="menu3.menuId+''"
                                          v-if="menu3.menuType=='C'||menu3.menuType=='M'">
                                <router-link :to="menu3.path" slot="title">{{menu3.menuName}}</router-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="text-align: right; font-size: 12px; height: 40px">
                <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path!='/index'"
                               style="margin-top: 3px ;display: inline-block;margin-right: 80%">

                    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ this.$router.currentRoute.meta.title }}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-dropdown>
                    <el-button type="info" size="mini" plain style="font-size: 15px;margin-top: 5px">{{userName}}
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <router-link :to="personal">个人中心</router-link>
                        </el-dropdown-item>
                        <el-dropdown-item><span @click="logout()">退出登录</span></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-main>
                <!-- 跳转页面挂载的视图-->
                <router-view>

                </router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Index",
        data() {
            return {
                isCollapse: false,
                menus: [],
                tagList: [],
                userName: "",
                personal: "personal"
            }
        },
        methods: {
            loadMenus() {
                let username = localStorage.getItem("username");
                this.userName = username;
                this.axios.get("http://localhost:8080/menus/?username=" + username)
                    .then(res => {
                        if (res.data.data) {
                            this.menus = res.data.data;
                        }
                    });
            },
            logout() {
                this.axios.post("http://localhost:8080/logout").then(
                    res => {
                        this.$message.success("退出成功！");
                        window.localStorage.clear();
                        this.$router.push('/');
                    }
                )
            }
        },
        created() {
            this.loadMenus();
        }
    }
</script>

<style scoped>

    .el-header {
        background-color: #eeeeee;
        color: #333;
        line-height: 10px;
    }

    .el-aside {
        color: #333;
    }

    .router-link-active {
        text-decoration: none;
        color: cornflowerblue;
    }

    a {
        text-decoration: none;
        color: grey;
    }
</style>